<template>
  <div>
    <!-- 基本信息区 -->
    <div class="w">
      <div class="content-area" style="padding-top: 15px;">
          <Row class="info-row">
              <Col :span="2" :offset="1"><div style="padding-right: 15px; text-align: right;">产品名称：</div></Col>
              <Col :span="20"><div>达梦数据库功能性测试</div></Col>
          </Row>
          <Row class="info-row">
              <Col :span="2" :offset="1"><div style="padding-right: 15px; text-align: right;">评测代码：</div></Col>
              <Col :span="20"><div>20220412333</div></Col>
          </Row>
          <Row class="info-row">
              <Col :span="2" :offset="1"><div style="padding-right: 15px; text-align: right;">评测描述：</div></Col>
              <Col :span="20"><div>DM8是达梦公司在总结DM系列产品研发与应用经验的基础上，坚持开放创新、简洁实用的理念，推出的新一代自研数据库。DM8吸收借鉴当前先进新技术思想与主流数据库产品的优点，融合了分布式、弹性计算与云计算的优势，对灵活性、易用性、可靠性、高安全性等方面进行了大规模改进，多样化架构充分满足不同场景需求，支持超大规模并发事务处理和事务-分析混合型业务处理，动态分配计算资源，实现更精细化的资源利用、更低成本的投入。一个数据库，满足用户多种需求，让用户能更加专注于业务发展。</div></Col>
          </Row>
          <Row class="info-row">
              <Col :span="2" :offset="1"><div style="padding-right: 15px; text-align: right;">针对产品：</div></Col>
              <Col :span="20"><div>达梦数据库v1.0安全版</div></Col>
          </Row>
          <Row class="info-row">
              <Col :span="2" :offset="1"><div style="padding-right: 15px; text-align: right;">占用资源：</div></Col>
              <Col :span="20"><div>虚拟机 (192.168.33.18)</div></Col>
          </Row>
          <Row>
              <Col :span="2" :offset="1"><div style="padding-right: 15px; text-align: right;">评测开始时间：</div></Col>
              <Col :span="20"><div>2022年5月23日</div></Col>
          </Row>
      </div>
    </div>

    <!-- 列表区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>用例列表</span>
      </div>
      <div class="content-area">
        <Table
          style="margin-top: 20px"
          :columns="tableColumns"
          :dataSource="tableData"
          :bordered="false"
          :rowKey="(record) => record.key"
          :pagination="false">
        </Table>
      </div>
    </div>

    <!-- 表单区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>评测结果</span>
      </div>
      <div class="content-area">
        <Form style="margin-top: 35px;" 
          name="form" 
          ref="form" 
          :labelCol="labelCol" 
          :wrapperCol="wrapperCol" 
          :initialValues="{}">
          <Row>
            <Col :span="12" :offset="5">
              <FormItem name="report" label="测试报告">
                <Upload></Upload>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12" :offset="5">
              <FormItem name="timestamp" label="完成时间">
                <DatePicker placeholder="请选择完成时间" mode="date" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12" :offset="5">
              <FormItem name="description" label="测试结果描述">
                <TextArea placeholder="请输入测试结果描述" style="width: 100%; height: 100px;" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12" :offset="5">
              <FormItem name="result" label="测试结果总结">
                <Select placeholder="请选择测试结果" style="width: 100%" allowClear>
                    <Option key="1" value="pass" label="通过" />
                    <Option key="2" value="part" label="部分通过" />
                    <Option key="3" value="fail" label="不通过" />
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row style="margin-top: 50px;">
            <Col :span="12" :offset="6">
              <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
                <Button style="width: 100px;" type="primary" @click="submit">提 交</Button>
                <Button style="width: 100px; margin-left: 20px;" @click="cancel">取 消</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from '@/components/upload/index'
export default {
    name: "app",
    components: {
        Upload
    },
    data: function () {
      return {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 15
        },
        tableData: [
          { "type":"压测类", "name":"用例1", "input":"用例1输入信息...", "output":"", "result":"通过" },
          { "type":"功能类", "name":"用例2", "input":"用例2输入信息...", "output":"", "result":"不通过" },
          { "type":"压测类", "name":"用例3", "input":"用例3输入信息...", "output":"", "result":"不通过" },
          { "type":"压测类", "name":"用例4", "input":"用例4输入信息...", "output":"", "result":"通过" },
          { "type":"功能类", "name":"用例5", "input":"用例5输入信息...", "output":"", "result":"通过" },
        ],
        tableColumns: [
          {"title":"用例类型", "dataIndex":"type", "key":"type"},
          {"title":"用例名称", "dataIndex":"name", "key":"name"},
          {"title":"输入", "dataIndex":"input", "key":"input"},
          {"title":"输出", "dataIndex":"output", "key":"output"},
          {"title":"是否通过", "dataIndex":"result", "key":"result"}
        ],
      }
    },
    methods: {
        submit: function () {
            console.log("Submit...");
        },
        cancel: function () {
            this.$router.push('/resultMgr');
        }
    }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }
  /* 基本信息区域 */
  .info-row {
    margin-bottom: 20px !important;
  }
  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

